<template>
  <div id="app">
    <!-- 头部导航 -->
    <el-header class="app-header">
      <div class="header-content">
        <div class="logo">
          <el-icon class="logo-icon"><Document /></el-icon>
          <span class="logo-text">SmartResume-AI</span>
          <img src="/miku-icon.svg" alt="Miku" class="miku-icon" />
        </div>
        
        <div class="header-center">
          <div class="header-subtitle">智能简历分析工具</div>
        </div>
        
        <!-- 语言切换和GitHub链接 -->
        <div class="header-right">
          <a href="https://github.com/Miku-da-you/SmartResume-AI" target="_blank" class="github-link">
            <img src="/github-icon.svg" alt="GitHub" class="github-icon" />
          </a>
          <div class="language-switch">
            <el-select v-model="currentLanguage" size="small" @change="changeLanguage">
              <el-option label="中文" value="zh"></el-option>
              <el-option label="English" value="en"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="app-main">
      <ResumeUpload />
    </el-main>

    <!-- 底部信息 -->
    <el-footer class="app-footer">
      <div class="footer-content">
        <p>© SmartResume-AI. 基于国产大模型的智能简历分析工具</p>
        <p class="tech-stack">技术栈：Vue3 + Element Plus + Spring Boot + Spark Lite</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import ResumeUpload from './pages/ResumeUpload.vue'
import { Document } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'App',
  components: {
    ResumeUpload,
    Document
  },
  setup() {
    const currentLanguage = ref('zh')
    
    const changeLanguage = (lang) => {
      if (lang === 'en') {
        ElMessage.info('English version is coming soon!')
      } else {
        ElMessage.success('已切换到中文')
      }
    }
    
    return {
      currentLanguage,
      changeLanguage
    }
  }
}
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #303133;
  line-height: 1.6;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  height: 80px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  flex: 0 0 auto;
}

.logo-icon {
  font-size: 28px;
  margin-right: 12px;
}

.logo-text {
  background: linear-gradient(45deg, #fff, #e3f2fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.miku-icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.header-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* 头部右侧区域 */
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
}

.github-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.github-link:hover {
  transform: scale(1.1);
}

.github-icon {
  width: 20px;
  height: 20px;
  filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 语言切换样式 */
.language-switch {
  display: flex;
  align-items: center;
}

.language-switch .el-select {
  width: 100px;
}

.language-switch .el-input__wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.language-switch .el-input__inner {
  color: white;
}

/* 主内容区域 */
.app-main {
  flex: 1;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 底部样式 */
.app-footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  text-align: center;
  padding: 20px;
  height: auto !important;
}

.footer-content p {
  margin: 5px 0;
}

.tech-stack {
  font-size: 12px;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content {
    padding: 0 15px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
  
  .app-main {
    padding: 30px 15px;
  }
}

@media (max-width: 768px) {
  .header-content {
    height: auto;
    min-height: 80px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 15px 20px;
    gap: 10px;
  }
  
  .header-center {
    position: static;
    transform: none;
    margin-top: 8px;
  }
  
  .header-subtitle {
    font-size: 14px;
    margin-top: 0;
  }
  
  .header-right {
    margin-top: 10px;
    gap: 10px;
  }
  
  .app-main {
    padding: 20px 10px;
  }
  
  .logo {
    font-size: 20px;
  }
  
  .logo-icon {
    font-size: 24px;
  }
  
  .language-switch .el-select {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 10px 15px;
  }
  
  .logo {
    font-size: 18px;
  }
  
  .logo-icon {
    font-size: 20px;
  }
  
  .header-subtitle {
    font-size: 12px;
    letter-spacing: 0.5px;
  }
  
  .app-main {
    padding: 15px 8px;
  }
  
  .language-switch .el-select {
    width: 70px;
  }
  
  .github-icon {
    width: 18px;
    height: 18px;
  }
}

/* Element Plus 组件样式覆盖 */
.el-header {
  padding: 0 !important;
}

.el-main {
  padding: 0 !important;
}

.el-footer {
  padding: 0 !important;
}
</style>